<template>
    <div id="app">
        <fieldset>
            <legend>todes</legend>
            <input type="text" v-model="message" class="whx">
            <button @click="handleAdd">添加</button>
            <div>
                <ul>
                    <template v-for="(item, i) in zatq ">
                        <li v-show="item.status == comp || comp == 'all'">
                            <input type="checkbox" v-model="item.status">
                            <span>{{ i }}--{{ item.name }}</span>
                            <button @click="handleDel(i)">删除</button>
                        </li>
                    </template>
                </ul>
            </div>
            <button @click="handle(true)">显示选中（{{ computedCheck }}）</button>
            <button @click="handle(false)">显示未选中（{{ comptedNo }}）</button>
            <button @click="handle('all')">显示全部（{{ zatq.length }}）</button>
            <hr />
            <div>{{ zatq}}</div>

        </fieldset>
    </div>
</template>
<script setup>
import { ref, computed } from 'vue'
const comp = ref('all')
const message = ref('')
const zatq = ref([
    { id: '1', name: '小米', status: true },
    { id: '2', name: '华为', status: true },
    { id: '3', name: '苹果', status: false },
    { id: '4', name: '三星', status: true },
])
const handleAdd = () => {
    zatq.value.push({ id: zatq.value.length + 1, name: message.value, status: false })
}
const handleDel = (i) => {
    zatq.value.splice(i, 1)
}

// const computedCheck=computed(()=>{
//   return zatq.value.filter((item,i)=>{
//       return item.status
//   }).length            
// })

const computedCheck = computed({
    get() {
        return zatq.value.filter((item, i) => {
            return item.status
        }).length
    },
    set(value) {
        // console.log(value, 'whx');
    }
})

const comptedNo = computed(() => {
    return zatq.value.length - computedCheck.value
})

const handle = (temp) => {
    comp.value = temp
}


</script>>
<style scoped>
ul>li {
    list-style: none
}

.a {
    color: black;
}
</style>